<template>
  <div class="Son2">Son2</div>
  <hr />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 获取Son1通过BrotherTest组件传过来的colorSon2
withDefaults(
  defineProps<{
    color: string;
  }>(),
  {
    color: 'red'
  }
);

// 局部使用事件总线，Son2传值给Son1
import Bus from '@/utils/Bus';
const color2 = ref<string>('#4d90fe');
const emit2 = () => {
  Bus.emit('clickSon2', color2);
};

// 使用 局部Mitt ，Son2传值给Son1
import mitter from '@/utils/Mitt';
const mitt1 = ref<string>('使用局部Mitt传参');
const mitterTest1 = () => {
  mitter.emit('mitterTest1', mitt1);
};
// 全局Mitt
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance(); // 获取当前组件实例
const mitt2 = ref<string>('使用全局Mitt传参');
const mitterTest2 = () => {
  instance?.proxy?.$Mitter.emit('mitterTest2', mitt2);
};

onMounted(() => {
  emit2();
  mitterTest1();
  mitterTest2();
});
</script>

<style lang="scss" scoped>
.Son2 {
  width: 100px;
  height: 100px;
  background-color: v-bind(color);
}
</style>
